<template>
  <div class="default-layout">
    <Header></Header>
    <div class="default-layout-main flex-1" :class="{'default-layout-main-activity': isActivity}">
      <div class="default-layout-menu">
        <NavMenus />
      </div>
      <div class="default-layout-content">
        <div class="flex-1">
          <RouterView v-slot="{ Component }">
            <keep-alive :include="[keepAliveComponentName.News, keepAliveComponentName.Activity]">
              <component :is="Component" />
            </keep-alive>
          </RouterView>
        </div>
        <Footer />
      </div>
    </div>
    <ClientOnly>
      <ToolsFloat v-if="!isActivity" />
      <ActivityFloat v-else />
    </ClientOnly>
  </div>
</template>
<script lang='ts' setup>
import Header from './Header.vue'
import ToolsFloat from '@/components/ToolsFloat/index.vue'
import Footer from './Footer.vue'
import { setCustomSeoInfo } from '@/composables/useCustomSeoMeta.ts'
import NavMenus from './components/nav-menus.vue'
import ActivityFloat from '@/components/ToolsFloat/activityFloat'
import { keepAliveComponentName } from '@/constant'
setCustomSeoInfo() // 使用 route 自定义TDK，同其它地方有 useSeoMeta 会被覆盖
const router = useRouter()
const isActivity = computed(() => {
  return router.currentRoute.value.name === 'activity'
})
</script>
<style scoped lang='scss'>
$toolbar-height: 57px;
$page-padding: 32px;
$page-padding-md: 16px;

.default-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  .default-layout-main {
    flex: 1;
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding-left: $page-padding;
    padding-right: $page-padding;


    @media (max-width: 768px) {
      flex-direction: column;
      padding-left: $page-padding-md;
      padding-right: $page-padding-md;
    }
  }

  .default-layout-menu {
    position: sticky;
    position: -webkit-sticky;
    top: $toolbar-height;
    z-index: 1;
    width: 300px;
    max-height: calc(100vh - $toolbar-height);
    margin-right: $page-padding;
    padding-top: $page-padding;
    padding-bottom: $page-padding;
    background-color: #fff;
    overflow-y: auto;

    @media (max-width: 768px) {
      display: none;
      width: auto;
    }
  }

  .default-layout-content {
    flex: 1;
    min-width: 0;
    padding-top: $page-padding;
    padding-bottom: $page-padding;
    display: flex;
    flex-direction: column;

    @media (max-width: 768px) {
      padding-top: $page-padding-md;
      padding-bottom: $page-padding-md;
    }
  }
}
</style>
